<script setup>
import { ref, reactive } from 'vue'
import config from '@/assets/js/config'
import {
    getProduct,
    getDeviceType,
    addOrUpdateDevice,
} from '@/assets/api/device'
const props = defineProps({
    visible: {
        type: Boolean,
        required: true,
    },
    activeData: {
        type: Object,
        default() {
            return null
        },
    },
    title: {
        type: String,
        default: '',
    },
    deviceClassId: {
        type: String,
        default: '',
    },
    deviceClassify: {
        type: String,
        default: '',
    },
})
const emits = defineEmits(['update:visible', 'success'])
function closeAction() {
    emits('update:visible', false)
}
const productList = ref([])
const typeList = ref([])
function getData() {
    const { deviceClassId } = props
    getProduct({ deviceClassId }).then((res) => {
        productList.value = res.data
    })
    getDeviceType({ deviceClassId }).then((res) => {
        typeList.value = res.data
    })
}
getData()

const previewImageUrl = ref('')
const previewVisible = ref(false)
const fileList = ref([])
function handlePictureCardPreview(file) {
    previewImageUrl.value = file.url
    previewVisible.value = true
}
function handleUploadSuccess(res, file) {
    console.log(file)
    fileList.value.push({ name: res.data.fileName, url: res.data.filePath })
}
function handleRemove(file, fileList) {
    fileList.value = fileList.value.map((item) => {
        return { name: item.name, url: item.url }
    })
}

import { showMsg } from '@/assets/js/utils'
// 新增
const newFormRef = ref()
const newForm = reactive({})
function submitAction() {
    newFormRef.value.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
            const params = Object.assign(
                {
                    deviceClassify: props.deviceClassify,
                    deviceClass: props.deviceClassId,
                },
                newForm
            )
            addOrUpdateDevice(params).then(() => {
                showMsg('添加成功')
                closeAction()
                emits('success')
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}
</script>

<template>
    <el-dialog
        :model-value="visible"
        :title="title"
        width="600px"
        :draggable="true"
        @close="closeAction"
    >
        <el-form ref="newFormRef" :model="newForm" label-width="120px">
            <el-form-item
                label="设备名称："
                prop="name"
                :rules="[
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'change',
                    },
                ]"
            >
                <el-input
                    placeholder="请输入"
                    v-model.trim="newForm.name"
                ></el-input>
            </el-form-item>
            <el-form-item
                label="设备编号："
                prop="number"
                :rules="[
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'change',
                    },
                ]"
            >
                <el-input
                    placeholder="请输入"
                    v-model.trim="newForm.number"
                ></el-input>
            </el-form-item>
            <el-form-item
                label="设备类型："
                prop="deviceType"
                :rules="[
                    {
                        required: true,
                        message: '请选择',
                        trigger: 'change',
                    },
                ]"
            >
                <el-select
                    class="full"
                    v-model="newForm.deviceType"
                    placeholder="请选择"
                >
                    <el-option
                        :label="item.name"
                        :value="item.id"
                        v-for="(item, key) in typeList"
                        :key="key"
                    ></el-option>
                </el-select>
            </el-form-item>

            <el-form-item
                label="安装日期："
                prop="installTime"
                :rules="[
                    {
                        required: true,
                        message: '请选择',
                        trigger: 'change',
                    },
                ]"
            >
                <el-date-picker
                    v-model="newForm.installTime"
                    placeholder="请选择"
                    type="date"
                    value-format="YYYY-MM-DD"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item
                label="安装位置："
                prop="position"
                :rules="[
                    {
                        required: true,
                        message: '请输入安装位置',
                        trigger: 'change',
                    },
                ]"
            >
                <el-input
                    placeholder="请输入"
                    v-model.trim="newForm.position"
                ></el-input>
            </el-form-item>
            <el-form-item label="设备图片：">
                <el-upload
                    class="upload-image"
                    :action="config.uploadUrl"
                    list-type="picture-card"
                    :file-list="fileList"
                    accept="image/*"
                    :on-success="handleUploadSuccess"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove"
                >
                    <el-icon><Plus /></el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item
                label="产品："
                prop="productId"
                :rules="[
                    {
                        required: false,
                        message: '请选择产品',
                        trigger: 'change',
                    },
                ]"
            >
                <el-select
                    class="full"
                    v-model="newForm.productId"
                    placeholder="请选择"
                >
                    <el-option
                        :label="item.name"
                        :value="item.id"
                        v-for="(item, key) in productList"
                        :key="key"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="报警电话：">
                <el-input
                    placeholder="请输入报警电话（多个电话请使用英文逗号隔开）"
                    v-model.trim="newForm.alarmPhone"
                ></el-input>
            </el-form-item>
            <el-form-item
                label="安装人员："
                prop="installPerson"
                :rules="[
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'change',
                    },
                ]"
            >
                <el-input
                    placeholder="请输入"
                    v-model.trim="newForm.installPerson"
                ></el-input>
            </el-form-item>
            <el-form-item
                label="安装人员电话："
                prop="installPersonPhone"
                :rules="[
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'change',
                    },
                ]"
            >
                <el-input
                    placeholder="请输入"
                    v-model.trim="newForm.installPersonPhone"
                ></el-input>
            </el-form-item>
            <template v-if="deviceClassId == 2001">
                <el-form-item
                    label="摄像头账号："
                    prop="cameraAccount"
                    :rules="[
                        {
                            required: true,
                            message: '请输入',
                            trigger: 'change',
                        },
                    ]"
                >
                    <el-input
                        placeholder="请输入"
                        v-model.trim="newForm.cameraAccount"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    label="摄像头密码："
                    prop="cameraPassword"
                    :rules="[
                        {
                            required: true,
                            message: '请输入',
                            trigger: 'change',
                        },
                    ]"
                >
                    <el-input
                        placeholder="请输入"
                        type="password"
                        v-model.trim="newForm.cameraPassword"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    label="摄像头IP："
                    prop="cameraIp"
                    :rules="[
                        {
                            required: true,
                            message: '请输入',
                            trigger: 'change',
                        },
                    ]"
                >
                    <el-input
                        placeholder="请输入"
                        v-model.trim="newForm.cameraIp"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    label="摄像头端口："
                    prop="cameraPort"
                    :rules="[
                        {
                            required: true,
                            message: '请输入',
                            trigger: 'change',
                        },
                    ]"
                >
                    <el-input
                        placeholder="请输入"
                        v-model.trim="newForm.cameraPort"
                    ></el-input>
                </el-form-item>
            </template>
            <el-form-item label="备注：">
                <el-input
                    placeholder="请输入"
                    type="text"
                    v-model.trim="newForm.remark"
                ></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="closeAction">取消</el-button>
                <el-button type="primary" @click="submitAction">
                    提交
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<style lang="scss" scoped></style>
